<template>
	<!-- ok -->
	<view class="wanlpage-banner" :style="[pageData.style]">
		<swiper class="screen-swiper square-dot" :style="{height: pageData.params.height}" :indicator-dots="true"
			:circular="true" :autoplay="true" :interval="pageData.params.interval" duration="500">
			<swiper-item v-for="(image, keys) in pageData.data" :key="keys" @click="tapBanner(image)">
				<image :src="$wanlshop.oss(image.image, 414, 0, 1, 'transparent', 'png')" mode="aspectFill"></image>
			</swiper-item>

		</swiper>
	
	</view>
</template>
<script>
	export default {
		name: "WanlPageBanner",
		props: {
			pageData: {
				type: Object,
				default: function() {
					return {
						name: '',
						type: '',
						params: [],
						style: [],
						data: []
					}
				}
			}
		},
		data() {
			return {
				userInfor: uni.getStorageSync('wanlshop:user')
			}
		},
		methods: {
			tapBanner(data) {
				if (data.op_id) {

					uni.navigateTo({
						url: '/pages/product/goods?id=' + data.op_id
					})
				}
			},
		},
	}
</script>
<style lang="scss">
	.wanlpage-banner {
		padding: 0 20rpx;
		position: relative;
	}

	.bj {
		position: absolute;
		bottom: 10rpx;
		right: 30rpx;
		font-weight: bold;
		background: #fff;
		border-radius: 10rpx;
		padding: 0 10rpx;
	}

	.screen-swiper {
		min-height: 100rpx !important;

		image {
			overflow: hidden;
			border-radius: 16rpx;
		}
	}
</style>